<template>
  <div style="width: 100%">
    <el-row style="width: 100%" type="flex" justify="space-between">
      <el-col class="left">
        <i v-if="istop" class="el-icon-office-building"></i>
        <i v-else class="el-icon-user-solid"></i>
        {{ item.name }}
      </el-col>
      <el-col class="right">
        <span class="mainPeople">{{ item.manager }}</span>
        <el-dropdown class="drop" @command="mycommand">
          <span class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="add" >添加子部门</el-dropdown-item>
            <el-dropdown-item command="edit"  v-if="!istop">查看部门</el-dropdown-item>
            <el-dropdown-item command="del"  v-if="!istop">删除部门</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { deleteDepartmentsApi } from '@/api/departments.js'
export default {
  props: ['item', 'istop'],
  methods: {
    async mycommand(command) {
      if (command==='del') {
        try {
          await this.$confirm('请确认是否删除该部门','温馨提示') 
          await deleteDepartmentsApi(this.item.id)
          this.$message.success('删除成功')
          this.$emit('updatedata')
        } catch (error) {
          console.log('删除失败');
        }
      }else if(command === 'add') {
        // 将当前操作的item传到index页面
        this.$emit('openPanel',this.item)
      }else {
        // 编辑事件
        this.$emit('editPanel',this.item)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.left {
  font-weight: 700;
  font-size: 15px;
}
.right {
  text-align: right;
  .mainPeople {
    margin-right: 20px;
    font-size: 14px;
  }
}
</style>
